<template>
  <div class="container">
    <a-modal
      v-model:visible="visible"
      v-model:draggable="draggable"
      :title="title"
      @cancel="handleCancel"
      @before-ok="onBeforeOk"
    >
      <a-form
        ref="formRef"
        :label-col-props="{ span: 7 }"
        :wrapper-col-props="{ span: 17 }"
        :model="formData"
        class="form"
      >
        <a-spin dot :loading="loading">
          <a-form-item
            label="账号"
            field="account"
            :rules="[
              {
                required: true,
                message: '请输入账号',
              },
              {
                maxLength: 15,
                message: '账号名称最多15个字符',
              },
              {
                minLength: 4,
                message: '账号名称最少4个字符',
              },
            ]"
          >
            <a-input v-model="formData.account" :disabled="!isNew"/>
          </a-form-item>

          <a-form-item
            v-if="isNew"
            label="密码"
            field="password"
            :rules="[
              {
                required: true,
                message: '请输入密码',
              },
              {
                maxLength: 15,
                message: '密码最多15个字符',
              },
              {
                minLength: 6,
                message: '密码最少6个字符',
              },
            ]"
          >
            <a-input-password v-model="formData.password" :defaultVisibility="true"/>
          </a-form-item>


          <a-form-item
              v-if="isNew"
              label="确认密码"
              field="password"
              :rules="[
              {
                required: true,
                message: '请输入密码',
              },
              {
                maxLength: 15,
                message: '密码最多15个字符',
              },
              {
                minLength: 6,
                message: '密码最少6个字符',
              },
            ]"
          >
            <a-input-password v-model="formData.passwordAgain" :defaultVisibility="true"/>
          </a-form-item>

          <a-form-item label="性别" field="gender">
            <a-select v-model="formData.gender" placeholder="性别">
              <a-option value="1"><icon-man />男</a-option>
              <a-option value="2"><icon-woman />女</a-option>
            </a-select>
          </a-form-item>

          <a-form-item
            label="邮箱"
            field="email"
            :validate-trigger="['change', 'input']"
            :rules="[
              {
                required: true,
                message: '请输入邮箱',
              },
              {
                maxLength: 15,
                message: '邮箱最多15个字符',
              },
              {
                minLength: 2,
                message: '邮箱最少2个字符',
              },
            ]"
          >
            <a-input v-model="formData.email" placeholder="如:xxx@qq.com" />
          </a-form-item>

          <a-form-item
            label="姓名"
            field="name"
            :validate-trigger="['change', 'input']"
            :rules="[
              {
                required: false,
                message: '请输入姓名',
              },
              {
                maxLength: 10,
                message: '姓名最多10个字符',
              },
              {
                minLength: 2,
                message: '姓名最少2个字符',
              },
            ]"
          >
            <a-input v-model="formData.name" placeholder="如: userManager" />
          </a-form-item>

          <a-form-item
            label="昵称"
            field="nickname"
            :validate-trigger="['change', 'input']"
            :rules="[
              {
                required: false,
                message: '请输入昵称',
              },
              {
                maxLength: 20,
                message: '昵称最多20个字符',
              },
              {
                minLength: 2,
                message: '昵称最少2个字符',
              },
            ]"
          >
            <a-input
              v-model="formData.nickname"
              placeholder="如: userManager"
            />
          </a-form-item>

          <a-form-item
            label="手机号"
            field="phone"
            :validate-trigger="['change', 'input']"
            :rules="[
              {
                required: false,
                message: '请输入手机号',
              },
              {
                maxLength: 11,
                message: '手机号最多11个字符',
              },
              {
                minLength: 11,
                message: '手机号最少11个字符',
              },
            ]"
          >
            <a-input v-model="formData.phone" placeholder="如: 156666666666" />
          </a-form-item>

          <a-form-item
            label="出生日期"
            field="birthday"
            :validate-trigger="['change', 'input']"
            :rules="[
              {
                required: false,
                message: '请输入出生日期',
              },
            ]"
          >
            <a-date-picker v-model="formData.birthday" style="width: 200px" />
          </a-form-item>

          <a-form-item
            label="年龄"
            field="age"
            :validate-trigger="['change', 'input']"
          >
            <a-input-number v-model="formData.age" placeholder="18" />
          </a-form-item>

          <a-form-item
            label="排序"
            field="sortCode"
            :validate-trigger="['change', 'input']"
          >
            <a-input-number v-model="formData.sortCode" placeholder="1" />
          </a-form-item>

          <a-form-item label="民族" field="nation">
            <a-input-number v-model="formData.nation" placeholder="如:汉族" />
          </a-form-item>

          <a-form-item v-if="!isNew" label="ID" field="id" v-show="false">
            <a-input v-model="formData.id" placeholder="id" />
          </a-form-item>
        </a-spin>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, watch } from 'vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import useLoading from '@/hooks/loading';
  import { useI18n } from 'vue-i18n';
  import { add, detail, edit } from '@/api/user';
  import { Message } from '@arco-design/web-vue';
  import {Md5} from "ts-md5";

  const formModel = () => {
    return {
      id: null,
      avatar: null,
      password: '',
      passwordAgain:'',
      account: null,
      name: null,
      nickname: null,
      gender: '1',
      age: '',
      birthday: null,
      nation:null,
      phone: null,
      email: null,
      sortCode: 0,
    };
  };

  export default defineComponent({
    setup(props, context) {
      const { t } = useI18n();
      const formData = ref(formModel());
      const formRef = ref<FormInstance>();
      const { setLoading } = useLoading();
      const operate = ref<number>();
      const isNew = ref<boolean>(false);
      const onBeforeOk = async (done: (arg: boolean) => void) => {
      const res = await formRef.value?.validate();
        if (!res) {
          const isSame = formData.value.password === formData.value.passwordAgain;
          if(!isSame){
            Message.error('2次密码输入不一致');
            return false;
          }
          try {
            setLoading(true);
            if (isNew.value) {
              await add(formData.value);
            } else {
              await edit(formData.value);
            }
            Message.success('操作成功!');
            context.emit('ok');
          } catch (e) {
            return done(false);
          } finally {
            setLoading(false);
          }
        }
        return done(!res);
      };

      const reset = async () => {
        formData.value = formModel();
        await formRef.value?.resetFields();
      };
      return {
        formRef,
        reset,
        operate,
        formData,
        isNew,
        t,
        onBeforeOk,
      };
    },
    data() {
      return {
        visible: false,
        draggable: true,
        title: '',
        loading: false,
      };
    },
    methods: {
      addForm() {
        this.reset();
        this.visible = true;
        this.isNew = true;
        this.title = '新增用户';
      },
      async editForm(id: string) {
        await this.reset();
        this.visible = true;
        this.isNew = false;
        this.title = '编辑用户';
        const { data } = await detail(id);
        this.formData = data;
      },
      setLoading(loading: boolean) {
        this.loading = loading;
      },
      handleCancel() {
        this.reset();
        this.visible = false;
        this.isNew = true;
      },
    },
  });
</script>

<style scoped lang="less">
  .container {
    padding: 20px;

    .keep-margin {
      margin-bottom: 20px;
    }
  }

  .form {
    width: 420px;
  }
</style>
